$(function () {

//todo write my js code at here
    loadStudentList()

});

function loadStudentList(){

    $.ajax({
        url: "/api/student/list",

    }).done(function(data) {

        // console.log(data)
        let html="";
        data.forEach((element,index)=> {
            html+="<tr>"
            html+="<td>"+element.id+"</td>"
            html+="<td>"+element.name+"</td>"
            html+="<td>"+element.sex+"</td>"
            html+="<td>"+element.age+"</td>"
            html+="<td>"+element.sno+"</td>"

            html+="<td> <a href='#' onclick='showStudenDlg("+element.id+")'>编辑</a> &nbsp;&nbsp;<a href='#' onclick='deleteById("+element.id+")'>删除</a> </td>"
            html+="</tr>"

        })
        $("#studentTb").html(html)
    });
}
let layerIndex;
/*
打开新增窗口
 */
function showStudenDlg(id){
    let title="新增教职工"

    if (id){
        //是编辑
        title="编辑学生"
        $("#formId").css("display","block" )

        //读取学生信息，并赋值
        $.ajax({
            url:"/api/student/"+id,
            method: "GET"
        }).done(result=>{

            console.log(result)

            //遍历result对象并将值填充到#studForm表单中
            $.each(result,function (key,value){
                //修改选择器，确保选择的是#studForm内的字段
                var field=$('#studForm [name="'+key+'"]');

                if (field.is(':radio')){
                    field.filter('[value="'+value+'"]').prop('checked',true);//选择对应的单选按钮
                }else if (field.is(':checkbox')) {
                    field.prop('checked', value == "yes");//选择复选框
                }else {
                    field.val(value);//填充文本框或其他字段
                }
            });
        })
    }else{
        //是新增
        $("#studForm")[0].reset();
        $("#formId").css("display","none" )
    }
    layer.open({
        type:1,
        title:title,
        area:['520px','auto'],
        content:$('#studForm')//捕获层
    });
}

layui.use(function (){
    //(1)验证表单是否合法
    layui.form.on('submit(stu-reg)',function (data){
        event.preventDefault();//阻止表单默认提交

        commitStuDlg();
    })
});
function commitStuDlg(){
    let id=$("#id").val()
    let formData = $("#studForm").serialize();


    if (id!=null && id!=""){

        //更新学生

        $.ajax({
            url: "/api/student/update",
            method:"PUT",
            data:formData
        }).done(result=>{
            console.log(result);
            if(result.id){

                //(4)读取并刷新原来的学生列表
                loadStudentList();
                //(3)关闭弹出层
                console.log("add success!")
                if(layerIndex)
                    layer.close(layerIndex)


            }

        }).fail((jqXHR,textStatus,errorThrown)=>{
            console.error("Request failed:" + textStatus +" - " +errorThrown);
            //可以在这里处理错误逻辑
            alert("An error occured. please try again.");
        });


    }else {
        //(2)将表单数据发送到服务器的insert中，把提交按钮变灰

        $.ajax({
            url: "/api/student/add",
            method:"POST",
            data:formData
        }).done(result=>{
            console.log(result);
            if(result.id){

                //(4)读取并刷新原来的学生列表
                loadStudentList();
                //(3)关闭弹出层
                console.log("add success!")
                if(layerIndex)
                    layer.close(layerIndex)


            }

        }).fail((jqXHR,textStatus,errorThrown)=>{
            console.error("Request failed:" + textStatus +" - " +errorThrown);
            //可以在这里处理错误逻辑
            alert("An error occured. please try again.");
        });

    }


    $("#btnOK").prop("disabled",true).addClass("layui-btn-disabled");//禁用按钮
}


function deleteById(id){
    //删除
    layer.confirm('确定删除吗？一旦删除不可恢复', {icon: 3}, function(){

        $.ajax({
            url:"/api/student/delete/"+id,
            method:"DELETE"
        }).done(result=>{
            loadStudentList();
        })

        layer.closeAll();//关闭所有层
    }, function(){
    });
}